@mixin display-flex() {
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($value) {
    box-flex: $value;
    -prefix-box-flex: $value;
    flex: $value;
}

@mixin justify-content($type) {
    @if $type == center {
        -webkit-box-pack: center; 
        -moz-box-pack: center; 
        -ms-flex-pack: center; 
        -webkit-justify-content: center;
        justify-content: center;
    }
    @if $type == space-between {
        -webkit-box-pack: justify;
        -moz-box-pack: justify; 
        -ms-flex-pack: justify; 
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
}

@mixin align-items($type) {
    @if $type == center {
        -webkit-box-align: center; 
        -moz-box-align: center;
        -ms-flex-align: center; 
        -webkit-align-items: center;
        align-items: center;
    }
}
@mixin order($value){
    -webkit-box-ordinal-group: $value;
    -ms-flex-order: $value;
    -webkit-order: $value;
    order: $value;
}
@mixin flex-center($direction: both) {
    @extend %display-flex;
    @if $direction == both {
        @include justify-content(center);
        @include align-items(center);
    }
    @else if $direction == x {
        @include justify-content(center);
    }
    @else if $direction == y {
        @include align-items(center);
    }
}

%display-flex,%flex-display {
    @include display-flex();
}
